
<template>
  <div
    class="todo-footer"
    v-show="totalTodos"
  >
    <label>
      <!-- <input type="checkbox" :checked="isSelectAll" @change="checkIsAllChecked"/> -->
      <input
        type="checkbox"
        v-model="isSelectAll"
      />
    </label>
    <span> <span>已完成{{checkedTodos}}</span> / 总共{{totalTodos}} </span>
    <button
      class="btn btn-danger"
      @click="clearCheckedTodos"
    >清除已完成任务</button>
  </div>  
</template>

<script>
export default {
  name: 'MyFooter',
  props: ['todos'],
  computed: {
    //总共的todo数量
    totalTodos () {
      return this.todos.length
    },
    // 完成的todo数量
    checkedTodos () {
      return this.todos.reduce((prev, curr) => prev += curr.done ? 1 : 0, 0)
    },
    // is全选?
    isSelectAll: {
      get () { return this.checkedTodos === this.totalTodos },
      set (value) {
        console.log(value)
        this.$emit('appSelectAll',value)
      }
    }

  },
  methods: {
    //清除已完成(checked)代办todos
    clearCheckedTodos () {
      console.log('准备清除所有已完成代办');
      this.$emit('appClearCheckedTodos')
    }
  }
}
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>